<template>
	<view class="add-delivery-address">
		<g-navbar title="添加收货地址" backgroundColor="none" />
		<view class="main">
			<view class="add-form">
				<uni-forms class="form-main" :modelValue="formData" :rules="rules" ref="addForm">
					<uni-forms-item class="form-item" label="收货人" name="name">
						<g-input type="other" v-model="formData.name" input_type="text" placeholder="请输入姓名"
							:ref="inputRef" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="手机号码" name="phone">
						<g-input type="phone" v-model="formData.phone" :ref="inputRef" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="所在地区" name="area">
						<g-input type="picker" placeholder="选择地区" @onChange="onChange"
							:modelValue="formData.area?`${formData.pro}/${formData.city}/${formData.area}`:''"
							:ref="inputRef" />
					</uni-forms-item>
					<uni-forms-item class="form-item" label="详细地址" name="address">
						<g-input type="other" v-model="formData.address" input_type="text" placeholder="小区楼栋/乡村名称"
							:ref="inputRef" />
					</uni-forms-item>
				</uni-forms>
			</view>

			<view class="set-default-wrapper">
				<switch style="transform:scale(0.7)" :checked="formData.default === DEFAULT_TYPE.SET"
					@change="switchChange" />
				<view class="label">
					设为默认地址
				</view>
			</view>
			<view class="btn-wrapper">
				<g-button btn_text="提交" :borderRadius="24" :height="100" :width="686" @tap="add"></g-button>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import type { ILocation } from '@/components/global/g-input/types';
	import { reactive, Ref, ref, getCurrentInstance } from "vue";
	import { useStore } from 'vuex';
	import { onReady } from '@dcloudio/uni-app';
	import {
		mobile
	} from '@/utils/test';
	import REST_URL from '@/http/http.restUrl';
	import { ROUTE_TYPE } from '@/enum/router';
	import { DEFAULT_TYPE } from '@/enum/address';
	import { onLoad } from '@dcloudio/uni-app';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	//表单元素
	const addForm : Ref<any> = ref(null);




	interface IAddAddressForm {
		customer_id : number;
		phone : string;
		name : string;
		pro : string;
		city : string;
		area : string;
		address : string;
		default : DEFAULT_TYPE;
		aid ?: number;
		id ?: number;
	}



	const store = useStore();

	let formData : IAddAddressForm = reactive({
		customer_id: store.getters[GET_STORE_USERINFO].id,
		phone: '',
		name: '',
		pro: '',
		city: '',
		area: '',
		address: '',
		default: DEFAULT_TYPE.IGNORE,
	})

	enum HANDLE_TYPE {
		ADD = 'add',
		EDIT = 'edit',
	}

	let type : HANDLE_TYPE = HANDLE_TYPE.ADD;

	const instance = getCurrentInstance();
	console.log(instance)



	onLoad((options) => {
		if (options?.id) {
			type = HANDLE_TYPE.EDIT;
			formData.aid = options.id;
		}
	})


	const inputRef = (el) => {
		if (el) {
			// el.update();
		}

	}


	const rules = reactive({
		phone: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号码'
			}, {
				validateFunction: (rule, value, data, callback) => {
					if (mobile(value)) {
						return true
					} else {
						callback('请输入正确的手机号')
					}
				}
			}]
		},
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入收件人姓名'
			}]
		},
		pro: {
			rules: [{
				required: true,
				errorMessage: '请选择省份'
			}]
		},
		city: {
			rules: [{
				required: true,
				errorMessage: '请选择城市'
			}]
		},
		area: {
			rules: [{
				required: true,
				errorMessage: '请选择地区'
			}]
		},
		address: {
			rules: [{
				required: true,
				errorMessage: '请输入详细地址'
			}]
		}
	})

	const flag : Ref<boolean> = ref(true);

	onReady(async () => {
		addForm.value.setRules(rules);
		if (formData.aid) {
			const result : IAddAddressForm = (await uni.http.POST(REST_URL.getAddressDetailById, {
				aid: formData.aid,
				customer_id: store.getters[GET_STORE_USERINFO].id,
			})).data;
			formData.phone = result.phone;
			formData.name = result.name;
			formData.pro = result.pro;
			formData.city = result.city;
			formData.area = result.area;
			formData.address = result.address;
			formData.default = result.default;
		}
	})


	const onChange = (e : ILocation[]) => {
		console.log(e)
		formData.pro = e[0].text;
		formData.city = e[1].text;
		formData.area = e[2].text;
	}

	const switchChange = (e) => {
		console.log(e.detail.value)
		formData.default = e.detail.value ? DEFAULT_TYPE.SET : DEFAULT_TYPE.IGNORE;
	}


	const add = () => {
		addForm.value.validate().then(async (form : IAddAddressForm) => {
			console.log(formData)
			const { data } = await uni.http.POST(type == HANDLE_TYPE.ADD ? REST_URL.addDeliveryAddress : REST_URL.editDeliveryAddress, formData);
			console.log(data);
			uni.navigateBack({
				success: () => {
					uni.prompt.$showToast(`${type == HANDLE_TYPE.ADD ? '添加' : '修改'}地址成功`);
					uni.$emit('updateDeliveryAddressList');
				}
			})
		})
	}
</script>

<style scoped lang="scss">
	@import "./addDeliveryAddress.scss";
</style>